<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        margin: 0;
        font-family: Helvetica;
        font-size: 15px;
    }

    * {
        margin: 0;
        padding: 0;
    }

    .roller-wrapper {
        width: 400px;
        height: 300px;
        position: relative;
        background-image: linear-gradient(to bottom, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, .3) 100%);
        box-shadow: inset 0px 0px 12px rgba(0, 0, 0, .2);
        border-radius: 12px;
    }

    .roller-wrapper::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 60px;
        top: 120px;
        background-image: linear-gradient(to bottom,rgba(0,0,0,.1) 0%,rgba(0,0,0,.2) 50%,rgba(0,0,0,.25) 50%,rgba(0,0,0,.1) 100%);
        box-shadow: 0px 4px 12px rgba(0, 0, 0, .12);
        border-top: 1px solid rgba(0, 0, 0, .12);
        border-bottom: 1px solid rgba(0, 0, 0, .12);
        /* 解决按住bar无法滚动现象 */
        pointer-events: none; 

    }

    .roller {
        list-style: none;
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        /* 设定自动贴服的方向 */
        scroll-snap-type: y mandatory;
    }

    .roller li {
        width: 100%;
        height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
        font-size: 1.2rem;
        color: #333;
        /* 贴服的位置是元素的开始即顶部 */
        scroll-snap-align: center;
    }
    .roller li:last-child {
        margin-bottom: 120px;
    }
</style>

<body>
    <div class="roller-wrapper">
        <ul class="roller">
            <li></li>
            <li></li>
            <li>iPhone12 pro</li>
            <li>iPhone12</li>
            <li>iPhone12 mini</li>
            <li>iPhoneSE</li>
            <li>iPhone11</li>
            <li>iPhoneXR</li>
            <li>iPhoneXS</li>
            <li>iPhoneX</li>
            <li>iPhone6</li>
        </ul>
    </div>
</body>
<script>
    const el = document.querySelector(".roller")
    const elChiledren =  [].map.call(el.children,item => {return item.innerHTML}).filter(item => item);
    console.log(el.scrollHeight) // 780
    // 获取可滚动的总高度
    const totalScrollTop = el.scrollHeight - el.clientHeight;
    // li的高度
    const lineHeight = 60;
    
    el.addEventListener('scroll',() => {
        // console.log(elChiledren[parseInt(el.scrollTop / lineHeight)])
       
    })
</script>
</html>